<template>
<div>
  man:{{man}}
  <br>
  like:{{like1}}
  <br>
  <button @click="edit">修改</button>
</div>
  <div>
    name:{{name}}<br>
    age:{{age}}<br>
    like:{{like}}<br>
    <button @click="editMyToRefs">修改数据</button>
  </div>
</template>

<script setup lang="ts">
/**
 * reactive结构完了就不是响应式数据了,所以需要toRef或者toRefs
 * toRaw:是将响应式对象转成非响应式对象
 */
import {toRef,toRaw,toRefs,reactive} from "vue";
const man = reactive({
  name:'xiaoman',
  age:12,
  like:'jk'
})
// 实现toRefs的源码  --把对象里的所有属性都变成响应式对象
const myToRefs = <T extends object>(object:T) => {
  const map:any = {}
  for (let key in object){
    map[key] = toRef(object,key)
    }
  return object
  }
//只能修改响应式对象的值  非响应式试图毫无变化
const like1 = toRef(man,'like')
const edit = () => {
  like.value = 'lolita'
  console.log(like)
}
//作用是当reactive响应式数据被结构了,就是去响应式了,所以需要toRefs转成响应式数据   --一般用于结构
const {name,age,like} = toRefs(man)
const editMyToRefs = () => {
  name.value = 'zhou'
  // console.log(name,age,like)

  /**
   * man:响应式数据
   * toRaw(man):非响应式数据
   */
  console.log(man,toRaw(man))
}

</script>

<style scoped>

</style>